<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        a{text-decoration: none;display: block;width: 100px;height: 20px;background: lightgreen;}
        .erji li, .sanji li{
            opacity: 0;
        }
       /* .yiji:hover li{
           opacity: 1;
       } */
       .box .yiji .yijili:hover ul{
        opacity: 1;
       }
    </style>
</head>
<body>
    <div class="box">
        <ul class="yiji">
            <li class="yijili">
                <a href="#">一级菜单</a>
                <ul class="erji">
                    <li>
                        <a href="#">二级菜单1</a>
                        <ul class="sanji">
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单2</a>
                        <ul class="sanji">
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单3</a>
                        <ul class="sanji">
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单4</a>
                        <ul class="sanji">
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>